<template>
	<view class="after-sale-page" v-if="!loading">
		<!-- 售后进度 -->
		<scroll-view scroll-y class="container" :style="{height: scrollHeight + 'px'}">
			<!-- 售后状态 -->
			<view class="status-card">
				<view class="status-icon">
					<u-icon :name="statusIcon" size="60" :color="statusColor"></u-icon>
				</view>
				<view class="status-text" :style="{color: statusColor}">
					{{afterSaleInfo.statusText}}
				</view>
				<view class="status-desc">{{afterSaleInfo.statusDesc}}</view>
			</view>

			<!-- 进度时间轴 -->
			<view class="section">
				<view class="section-title">处理进度</view>
				<u-steps direction="column" :current="afterSaleInfo.currentStep" dot>
					<u-steps-item v-for="(step, index) in progressList" :key="index" :title="step.title"
						:desc="step.desc">
					</u-steps-item>
				</u-steps>
			</view>

			<!-- 售后信息 -->
			<view class="section">
				<view class="section-title">售后信息</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">售后类型：</text>
						<text class="info-value">{{afterSaleInfo.typeText}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">售后单号：</text>
						<text class="info-value">{{afterSaleInfo.afterSaleNo}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">申请时间：</text>
						<text class="info-value">{{afterSaleInfo.createTime}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">退款金额：</text>
						<text class="info-value">¥{{afterSaleInfo.amount}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">退款原因：</text>
						<text class="info-value">{{afterSaleInfo.reason}}</text>
					</view>
					<view class="info-item" v-if="afterSaleInfo.remark">
						<text class="info-label">问题描述：</text>
						<text class="info-value">{{afterSaleInfo.remark}}</text>
					</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="section">
				<view class="section-title">商品信息</view>
				<view class="goods-card">
					<u-image :src="goodsInfo.goodsImage" width="120rpx" height="120rpx" radius="8"></u-image>
					<view class="goods-info">
						<view class="goods-name">{{goodsInfo.goodsName}}</view>
						<view class="goods-spec">规格：{{goodsInfo.spec}}</view>
						<view class="goods-price">¥{{goodsInfo.price}}</view>
					</view>
				</view>
			</view>

			<!-- 凭证信息 -->
			<view class="section" v-if="afterSaleInfo.images && afterSaleInfo.images.length > 0">
				<view class="section-title">凭证信息</view>
				<u-upload :fileList="afterSaleInfo.images" :deletable="false" previewFullImage disabled></u-upload>
			</view>

			<!-- 操作按钮 -->
			<view class="action-btns" v-if="afterSaleInfo.status === 1">
				<u-button type="primary" shape="circle" text="撤销申请" @click="cancelAfterSale" :loading="submitloading"></u-button>
			</view>

			<!-- 客服信息 -->
			<view class="customer-service">
				<view class="cs-title">如需帮助，请联系客服</view>
				<view class="cs-tel" @click="callCustomerService">
					<u-icon name="phone" size="18" color="#ff2d51"></u-icon>
					<text>400-888-8888</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
	export default {
		data() {
			return {
				loading:false,
				submitloading:false,
				scrollHeight: 0,
				afterSaleInfo: {}, //申请信息
				goodsInfo: {}, //商品信息
				progressList: [] //处理进度
			}
		},
		computed: {
			statusIcon() {
				const map = {
					0: 'close-circle', // 已取消
					1: 'clock', // 处理中
					2: 'checkmark-circle', // 已完成
					3: 'close-circle' // 已拒绝
				}
				return map[this.afterSaleInfo.status] || 'clock';
			},
			statusColor() {
				const map = {
					0: '#909399', // 已取消
					1: '#ff9900', // 处理中
					2: '#19be6b', // 已完成
					3: '#fa3534' // 已拒绝
				}
				return map[this.afterSaleInfo.status] || '#ff9900';
			}
		},
		onLoad(options) {
			if (options.id) {
				this.loadAfterSaleDetail(options.id);
			}
			this.calcScrollHeight();
		},
		methods: {
			calcScrollHeight() {
				const systemInfo = uni.getSystemInfoSync()
				this.scrollHeight = systemInfo.windowHeight
			},
			// 加载售后详情
			async loadAfterSaleDetail(id) {
				try {
					this.loading = true;
					this.submitloading= true;
					let param = {
						usrid: uni.getStorageSync('usrid'),
						id: id,
					}
					uni.showLoading({
						title: '加载中...'
					});
					const res = await httpsend('getaftersaledetail', JSON.stringify(param));
					if (res?.code === 1) {
						//申请信息
						this.afterSaleInfo = res.afterSaleInfo;
						//商品信息
						this.goodsInfo = res.goodsInfo;
						//处理进度信息
						this.progressList = res.progressList;

					} else {
						this.$api.msg(res.msg);
					}
					this.loading = false;
					this.submitloading=false;
					uni.hideLoading();
				} catch (err) {
					this.loading = false;
					this.submitloading=false;
					uni.hideLoading();
					console.log('err', err);
				}
			},

			// 撤销售后申请
			async cancelAfterSale() {
				const res = await new Promise((resolve) => {
					uni.showModal({
						title: '提示',
						content: '确定要撤销本次售后申请吗?',
						success: (confirmRes) => {
							resolve(confirmRes.confirm);
						}
					});
				});
				if (!res) return;
				try {
					this.submitloading=true;
					uni.showLoading({
						title: '正在撤销...'
					});
					const res = await httpsend('ftersalecancel', JSON.stringify({
						usrid: uni.getStorageSync('usrid'),
						id: this.afterSaleInfo.id
					}));
					if (res?.code === 1) {
						this.afterSaleInfo.status = 0;
						this.afterSaleInfo.statusText = '已取消';
						this.afterSaleInfo.statusDesc = '您已取消本次售后申请';
						// 更新进度列表
						this.afterSaleInfo.currentStep++;
						this.progressList.splice(this.afterSaleInfo.currentStep, 0, {
							title: '申请已撤销',
							desc: this.formatTime(new Date())+'|用户主动撤销了售后申请'
						});
						console.log('this.progressList',this.progressList);
					}
					uni.hideLoading();
					this.$api.msg(res.msg);
					this.submitloading=false;
				} catch (err) {
					this.submitloading=false;
					uni.hideLoading();
					console.log('err', err);
				}
				
			},

			// 联系客服
			callCustomerService() {
				uni.makePhoneCall({
					phoneNumber: '4008888888'
				});
			},

			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.after-sale-page {
		height: 100vh;
		background-color: #f7f7f7;
	}

	.container {
		padding: 20rpx;
	}

	.status-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 20rpx;
		margin-bottom: 20rpx;
		text-align: center;

		.status-icon {
			margin-bottom: 20rpx;
		}

		.status-text {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.status-desc {
			font-size: 24rpx;
			color: #999;
		}
	}

	.section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}

	.info-list {
		.info-item {
			display: flex;
			margin-bottom: 16rpx;
			font-size: 26rpx;

			.info-label {
				color: #666;
				width: 160rpx;
			}

			.info-value {
				flex: 1;
				color: #333;
			}
		}
	}

	.goods-card {
		display: flex;

		.goods-info {
			flex: 1;
			margin-left: 20rpx;

			.goods-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-spec {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.goods-price {
				font-size: 28rpx;
				color: #ff2d51;
				font-weight: bold;
			}
		}
	}

	.timeline-content {
		padding-left: 20rpx;

		.timeline-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 6rpx;
		}

		.timeline-time {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 6rpx;
		}

		.timeline-desc {
			font-size: 24rpx;
			color: #666;
		}
	}

	.action-btns {
		margin: 40rpx 0;
		padding: 0 20rpx;
	}

	.customer-service {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		text-align: center;
		margin-top: 20rpx;

		.cs-title {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.cs-tel {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #ff2d51;

			text {
				margin-left: 10rpx;
			}
		}
	}

	/* uView 组件样式覆盖 */
	:deep(.u-timeline-item__node) {
		background-color: #ff2d51;
	}

	:deep(.u-timeline-item__line) {
		background-color: #ff2d51;
	}
</style>